<!DOCTYPE html>
<html>

<head lang='zh'>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
	<title>Luckysheet</title>

	<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
	<link rel='stylesheet' href='./plugins/plugins.css' />
	<link rel='stylesheet' href='./css/luckysheet.css' />
	<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
	<script src="./plugins/js/plugin.js"></script>

	<!-- rollup luckysheet.js -->
	<script src="./luckysheet.umd.js"></script>
	<!-- <script src="./controllers/cellTree.js"></script> -->
	<!-- <script type="text/javascript" src="./plugins/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./plugins/js/jquery.ztree.core.js"></script> -->

</head>

<body>
	<!-- <div id="btnAaaaaa" style="position:fixed;z-index:9999;right: 20px;">保存数据 </div> -->
	<div id="luckysheetDesign"
		style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;background-color: #fff;">
	</div>
	<script src="./demoData/sheetEmpty.js"></script>

	<script>
		$(function () {
			// const isShare = luckysheetDemoUtil.getRequest().share; // '?share=1' opens the collaborative editing mode
			// const gridKey = luckysheetDemoUtil.getRequest().gridKey; // workbook id for collaborative editing, or directly define here
			const options = {
				container: 'luckysheetDesign',
				compType: 'design', //'filling'
				useCase: 'page',
				lang: 'zh',
				showinfobar: false,
				forceCalculation: false,
				plugins: ['chart'],
				hook: {
					cellMousedown: function (cell, postion, sheetFile, ctx) {
						//等双击后luckysheet-input-box的top值改变后，判断双击事件，单击不执行
						// setTimeout(() => {
						// 	if (window.$('#luckysheet-input-box').position().top > 0 && sheetFile.dataVerification[postion.r + '_' + postion.c]) {
						// 		if (sheetFile.dataVerification[postion.r + '_' + postion.c].type == 'tree') {
						// 			window.initCellTree(postion, 1)
						// 			// luckysheet.setCellValue(postion.r, postion.c,1)
						// 		} else if (sheetFile.dataVerification[postion.r + '_' + postion.c].type == 'dialog') {
						// 			window.initCellDialog(postion, 1)
						// 		} else if (sheetFile.dataVerification[postion.r + '_' + postion.c].type == 'dictRender') {
						// 			window.initCellDict(postion, 1, sheetFile.dataVerification[postion.r + '_' + postion.c])
						// 		}
						// 	}
						// }, 100)
					},
					sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
						const active = window.activeDBData
						const targeDom = document.getElementById('luckysheet-modal-dialog-slider-dataconfig')
						if (!targeDom || !active) return
						const event = window.event
						const X = event.clientX
						const X1 = targeDom.offsetLeft
						if (X < X1) {
							// console.log('sheetMouseup', cell, postion, sheetFile, moveState, ctx);
							// 仅在设计模式下调用次方法
							luckysheet.setCellValue(postion.r, postion.c, {
								m: active.acValue, v: active.acValue,
								dataMark: { type: 'DBFiled', isList: true }
							})
							luckysheet.setDbMark(sheetFile, {
								r: postion.r,
								c: postion.c,
								m: active.acValue,
								v: active.acValue,
								titleReadonly: true,
								dataMark: { type: 'DBFiled', isList: true }
							})
						}
					},
					cellUpdateBefore: function (r, c, v, flag) {
						console.log('fffffffffff', r, c, v)
					},
					rangeSelect: function (sheet, range) {
						// console.info('rangeSelect', range)
						window.selectActive = range
					},
					handleSave: function (data) {
						handleSave(data)
					},
					closeFnc: function () {
						// 关闭事件回调
					}
				},
				// data: [{ name: 'Sheet1' }]
				data: [sheetEmpty]
			}
			options.loading = {
				image: () => {
					return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`
				},
				imageClass: "loadingAnimation"
			}
			luckysheet.create(options)
			$("#btnAaaaaa").click(function () {
				// 设计内容保存
				luckysheet.exitEditMode()  // 推出编辑模式然后保存数据
				// 获取所有的sheet配置数据
				let sheetsData = luckysheet.getAllSheets()
				// 需要将冗余的数据全部清除掉
				let designData = JSON.parse(JSON.stringify(sheetsData))
				for (let i = 0; i < designData.length; i++) {
					designData[i].data = []  // 清除冗余数据
					// 清除掉配置数据  因为配置数据存储与dbMark中
					// 此处过滤掉celldata中的冗余数据
					let cellData = designData[i].celldata
					if (designData[i].dictRenderData) {
						let dictCodes = {
							DICT: [],
							NEQ: [],
							TREEDICT: [],
							REGION: []
						}
						let OB = designData[i].dictRenderData
						Object.keys(OB).forEach(item => {
							if (OB[item].type === 'dictRender') {
								if (OB[item].value2 && !dictCodes[OB[item].value1].includes(OB[item].value2)) {
									dictCodes[OB[item].value1].push(OB[item].value2)
								}
							}
						})
						designData[i].dictCodes = dictCodes
					}
					for (let j = cellData.length - 1; j >= 0; j--) {
						if (cellData[j].v.dataMark && cellData[j].v.dataMark.type === 'DBFiled') {
							cellData.splice(j, 1)
						}
					}
					if (designData[i].dbMark) {
						const ordered = {}
						Object.keys(designData[i].dbMark).sort().forEach(item => ordered[item] = designData[i].dbMark[item])
						designData[i].dbMark = ordered
					}
				}
				console.log('sheetsData,', JSON.stringify(designData))
			})
		})
	    /**
		 * 保存事件
		 * @params {Array} data
		 * @params {string} filling rate type
		 * @params {array} delete id array
		 * */
		function handleSave(data) {
			console.log(data)
			// setTimeout(e=>{
			// 	window.luckysheet.closeLoading()
			// },2000)
				
			
		}
	</script>
	<style>
		/* 自定义loading演示样式 */
		@keyframes loading-rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes loading-dash {
			0% {
				stroke-dasharray: 1, 200;
				stroke-dashoffset: 0;
			}

			50% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -40px;
			}

			100% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -120px;
			}
		}

		.loadingAnimation {
			width: 3em;
			height: 3em;
			animation: loading-rotate 2s linear infinite;
		}

		.loadingAnimation circle {
			animation: loading-dash 1.5s ease-in-out infinite;
			stroke-dasharray: 90, 150;
			stroke-dashoffset: 0;
			stroke-width: 2;
			stroke: currentColor;
			stroke-linecap: round;
		}
	</style>
</body>

</html>